<template>
  <div class="container">
    <div style="display: inline; float: left; width: 50%; border: #3b4151 solid 1px">
      <ve-line :data="chartData" :extend="chartExtend"></ve-line>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      days: 13,
      chartData: {
        columns: ['日期', '访问用户'],
        rows: [
          {'日期': '1/1', '访问用户': 1393},
          {'日期': '1/2', '访问用户': 3342},
          {'日期': '1/3', '访问用户': 1543},
          {'日期': '1/4', '访问用户': 2236}
        ]
      },
      chartExtend: {
        color: ['#4ad2ff', '#ad1453', '#333333', '#1630ad']
      }
    }
  },
  mounted() {
    const that = this;
    this.timer = setInterval(() => {
      that.getDate();
    }, 3300);
  },
  methods: {
    getDate() {
      const that = this;
      let newDate1 = that.getRandomInt(1000, 25000);
      this.chartData.rows = [
        {'日期': '1/1', '访问用户': newDate1},
        {'日期': '1/2', '访问用户': 2000},
        {'日期': '1/3', '访问用户': 2000},
        {'日期': '1/4', '访问用户': 2000}
      ]
    },
    getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  },
}
</script>

<style scoped>

</style>
